import React from 'react';
import ServiceWrapper from 'beta/containers/layout/ServiceWrapper';
import { IContext } from 'beta/typings/context';
import { useRouter } from 'next/router';
import { MobileInternetService, MobileService, useServiceQuery } from 'typings/graphql';

import AbroadUsage from './containers/abroad/AbroadUsage';

const Utlond = () => {
  const router = useRouter();

  const {
    data: serviceData,
    loading: serviceLoading,
    error: serviceError,
  } = useServiceQuery({
    variables: {
      serviceId: (router.query.serviceId as string) ?? '',
    },
  });

  const service =
    serviceData?.service?.__typename === 'MobileService' ||
    serviceData?.service?.__typename === 'MobileInternetService'
      ? serviceData?.service
      : undefined;

  const mobileData: MobileService | MobileInternetService | undefined = service;

  if (serviceError || serviceLoading) {
    return null;
  }

  return (
    <ServiceWrapper>
      <AbroadUsage subscriptionId={mobileData?.phoneNumber || ''} />
    </ServiceWrapper>
  );
};

Utlond.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    serviceId: query.serviceId,
    namespacesRequired: [],
  };
};

export default Utlond;